<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { shopGoodsListInsatnce } from '@/types/component'

//接收参数
const props = withDefaults(
  defineProps<{
    classify_id?: string
    name?: string
    coupon_id?: string
    empty_text?: string
  }>(),
  {
    classify_id: '',
    name: '',
    coupon_id: '',
    empty_text: 'No products available',
  },
)

const query = reactive({
  classify_id: props.classify_id,
  name: props.name,
  coupon_id: props.coupon_id,
  sort_field: '',
  sort_by: '',
})

const shopGoodsListRef = ref<shopGoodsListInsatnce>()

const queryOptions = ref([
  { title: 'Comprehensive', value: 'all', type: 'click' },
  { title: 'Sales Priority', value: 'sales', type: 'click' },
  {
    title: 'Price',
    value: '',
    type: 'sort',
    options: [{ value: 'asc' }, { value: 'desc' }],
  },
])

const onChange = (data: any, index: number) => {
  console.log(data, index)
}
const onConfirm = (data: any) => {
  const { value, type } = data
  if (value === 'all') {
    Object.assign(query, { sort_field: data.value })
  } else if (value === 'sales') {
    Object.assign(query, { sort_field: data.value, sort_by: 'desc' })
  } else if (type === 'sort') {
    Object.assign(query, { sort_field: 'price', sort_by: value })
  }

  shopGoodsListRef.value?.reload()
}
</script>

<template>
  <shop-goods-list
    :query="query"
    :safe-area-inset-bottom="true"
    ref="shopGoodsListRef"
    :options="{
      emptyViewText: empty_text,
      backGroundColor: '#fff',
    }"
  >
    <template #top>
      <view v-if="query">
        <le-dropdown
          v-model:menuList="queryOptions"
          themeColor="#3185FF"
          :duration="300"
          :isCeiling="false"
          @onConfirm="onConfirm"
          @onChange="onChange"
        ></le-dropdown>
      </view>
    </template>
  </shop-goods-list>
</template>

<style lang="scss" scoped>
page {
  background-color: #ececec;
}
.toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-color: #fff;
  height: 100rpx;
  padding: 0 20rpx var(--window-bottom);
  border-top: 1rpx solid #eaeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: content-box;
}
// 底部占位空盒子
.toolbar-height {
  height: 190rpx;
}
</style>
